<template>
  <div>
    <div>
      <el-form>
      <el-input style="width: 150px" v-model="mname"
                class="search_mname" @keyup.native="onSearch1()" placeholder="输入商场查询">
      </el-input>
      <el-input style="width: 150px" v-model="amount"
                class="search_amout" @keyup.native="onSearch1()" placeholder="输入水费查询">
      </el-input>
        <el-form-item>
          <el-button style="margin-bottom: 10px;margin-top: 10px" class="el-icon-circle-plus-outline"
                     type="primary" plain @click="dialogVisible = true">添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)"  border stripe @selection-change="selsChange" >
        <el-table-column label="序号" prop="id" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="商场名称" prop="mname"/>
        <el-table-column label="水费" prop="amount"/>
      </el-table>
      <el-dialog title="添加" :visible.sync="dialogVisible" width="35%" @close='cancel'>
        <el-form style="width: 70%" :model="ruleForm" ref="ruleForm" label-width="170px" class="demo-ruleForm">
          <el-form-item label="商场名称" prop="mname">
            <el-input v-model="ruleForm.mname" style="width:100%"></el-input>
          </el-form-item>
          <el-form-item label="水费" prop="amount">
            <el-input v-model="ruleForm.amount" style="width:100%"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
          </span>
        </span>
      </el-dialog>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
        <el-dialog title="编辑" :append-to-body='true' :visible.sync="dialogUpdate"
                   width="30%" :before-close="cancel">
          <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="序号" prop="id" style="display:none">
              <el-input v-model="ruleForm.id" type="hidden" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="商场名称" prop="mname">
              <el-input v-model="ruleForm.mname" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="水费" prop="amount">
              <el-input v-model="ruleForm.amount" style="width: 300px"></el-input>
            </el-form-item>

          </el-form>
          <span slot="footer" class="dialog-footer">
     <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
          </span>
          </span>
        </el-dialog>
      </el-form>
    </div>
    <div class="pagei">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shangcheng',
  data () {
    return {
      dialogVisible: false,
      conditioner: '',
      mname: '',
      amount: '',
      lighting: '',
      schArr: [], // 分页数据源
      pagesize: 3,
      currentPage: 1,
      total: 0,
      tableData: [],
      search: '',
      search1: '',
      activeName: 'a',
      radio: '1',
      users: {},
      ruleForm: {
        tableData: [],
        dialogVisible: false,
        dialogUpdate: false,
        pageSize: 5,
        currentPage: 1,
        total: 0,
        disablePage: false
      },
    }
  },
  created () {
    const that = this
    this.getPages()
    // this.getPages();
    this.axios.post('http://localhost:8001/queryMarket')
        .then(function (response) {
          console.log(response)
          that.users = response.data
        })
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
      this.dialogUpdate = false
    },
    handleEdit(index, row) {
      this.dialogUpdate = true;
      this.ruleForm = Object.assign({}, row); //这句是关键！！！
    }, updateUser() {
      let postData = this.qs.stringify({
        id: this.ruleForm.id,
        mname: this.ruleForm.mname,
        amount: this.ruleForm.amount,
      });

      this.axios({
        method: 'post',
        url: 'http://localhost:8001/updateMarket',
        data: postData
      }).then(response => {
        this.axios.post('http://localhost:8001/queryMarket').then(response => {
          this.tableData = response.data;
          this.currentPage = 1;
          this.onSearch();
          this.cancel()
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }).catch(error => {
          console.log(error);
          location.reload()
        });
        this.getPages();
        this.dialogVisible = false
        console.log(response);
      }).catch(error => {
        console.log(error);
        location.reload();
      });
    },
    addUser() {
      let postData = this.qs.stringify({
        market: this.ruleForm.market,
        amount: this.ruleForm.amount,
      })
      this.axios({
        method: 'post',
        url: 'http://localhost:8001/addMarket',
        data: postData
      }).then(response => {
        this.axios.post('http://localhost:8001/queryMarket').then(response => {
          this.tableData = response.data
          this.currentPage = 1
          this.onSearch()
          this.cancel()
          this.$message({
            type: 'success',
            message: '已添加!'
          })
        }).catch(error => {
          console.log(error)
          location.reload()
        })
        this.getPages()
        this.dialogVisible = false
        console.log(response)
      }).catch(error => {
        console.log(error)
        location.reload()
      })
    },
    onSearch1() {
      let marketData = this.qs.stringify({
        mname: this.mname,
        amount: this.amount
      })
      this.axios({
        method: 'post',
        url: 'http://localhost:8001/queryMarket',
        data: marketData
      }).then(response => {
        this.getPages()
        this.users = response.data
        this.disablePage = true
      }).catch(error => {
        console.log(error)
      })
      this.axios({
        method: 'post',
        url: 'http://localhost:8001/getCountMarket',
        data: marketData
      }).then(response => {
        this.total = response.data
      }).catch(error => {
        console.log(error)
      });
      this.axios({
        method: 'post',
        url: 'http://localhost:8001/queryMarket',
        data: marketData
      })

    },
    jisuan (){
      this.ruleForm1.total = this.ruleForm1.total = (this.ruleForm1.lighting*1) + ( this.ruleForm1.conditioner *1)
      this.jisuan1()
    },
    jisuan1 (){
      this.ruleForm1.money = this.ruleForm1.total = (this.ruleForm1.lighting*1) + ( this.ruleForm1.conditioner *1)
    },
    handleSizeChange (val) {
      this.getPageData()
      var s = this
      console.log(`每页 ${val} 条`)
      s.pagesize = val
      s.getPageData()
      console.log(s.pagesize)
    },
    handleCurrentChange (val) {
      this.getPageData()
      var ss = this
      console.log(`当前页: ${val}`)
      ss.currentPage = val
      ss.getPageData()
      console.log(ss.currentPage)
    },
    getPageData () {
      console.log('是否yes')
      var thats = this
      let start = (this.currentPage - 1) * this.pagesize
      let end = start + this.pagesize
      this.schArr = thats.users.slice(start, end)
      this.total = thats.users.length
    },
    getPages () {
      this.axios.post('http://localhost:8001/getCountMarket').then(response => {
        this.total = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>
